<template>
  <div class="counter-warp">
    <div class="header">
      <cover-view class="navbar" :style="{height: navBarHeight + 'px',lineHeight: navBarHeight + 'px'}">
        <cover-view class="nav-statusbar" :style="{height: statusBarHeight + 'px'}"></cover-view>
        <cover-view class="bar-title" :style="{height: titleBarHeight + 'px',lineHeight: titleBarHeight + 'px'}">我的</cover-view>
      </cover-view>
      <div class="info" ﻿@tap="goPage('/person/info')" v-if="isLogin">
        <div class="infoContent">
          <img :lazy-load="true" class="avatar" mode="aspectFill" :src="info.head_img ? picPre + info.head_img : picPre + 'front/avatar.jpg'" alt="">
          <div>
            <h1>{{ info.username ? info.username : info.mobile }}</h1>
            <span class="jingyan" ﻿@tap.stop="isShowRule=true">经验值：{{info.experience}}  <span class="iconfont iconguize"></span></span>
          </div>
        </div>
        <span class="iconfont iconyoujian" ﻿@tap.stop="goPage('/person/inform')">
          <span class="dot" v-if="info.has_new_msg">.</span>
        </span>
      </div>
      <div class="info" ﻿@tap="goPage('/person/login')" v-else>
        <div class="infoContent">
          <img :lazy-load="true" class="avatar" mode="widthFix" :src="picPre + 'front/avatar.jpg'" alt="">
          <div>
            <h1>点击登录</h1>
          </div>
        </div>
      </div>
    </div>
    <div class="list" v-if="isLogin">
      <div class="item needBorder" ﻿@tap="goPage('/person/integral')">
        <div class="title">
          <img src="/static/img/jifen.png" mode="widthFix" alt="">
          <span>积分&福利</span>
        </div>
        <div class="left iconfont iconyou"></div>
      </div>
      <button class="item kefu" open-type="contact" bindcontact="handleContact">
        <div class="title">
          <img src="/static/img/kefu.png" mode="widthFix" alt="">
          <span>客服</span>
        </div>
        <div class="left iconfont iconyou"></div>
      </button>
      <div class="line"></div>
      <div class="item needBorder" ﻿@tap="goPage('/person/issue')">
        <div class="title">
          <img src="/static/img/fabu.png" mode="widthFix" alt="">
          <span>我的发布</span>
        </div>
        <div class="left iconfont iconyou"></div>
      </div>
      <div class="item needBorder"  ﻿@tap="goPage('/person/collect')">
        <div class="title">
          <img src="/static/img/shoucang.png" mode="widthFix" alt="">
          <span>我的收藏</span>
        </div>
        <div class="left iconfont iconyou"></div>
      </div>
      <div class="item needBorder" ﻿@tap="goPage('/person/myComment')">
        <div class="title">
          <img src="/static/img/pinglun.png" mode="widthFix" alt="">
          <span>我的评论</span>
        </div>
        <div class="left iconfont iconyou"></div>
      </div>
      <div class="item"  ﻿@tap="goPage('/social/added')">
        <div class="title">
          <img src="/static/img/groupIcon.png" mode="widthFix" alt="">
          <span>我的群组</span>
        </div>
        <div class="left iconfont iconyou"></div>
      </div>
      <div class="line"></div>
      <div class="item"  ﻿@tap="logout">
        <div class="title">
          <img src="/static/img/tuichu.png" mode="widthFix" alt="">
          <span>退出登录</span>
        </div>
        <div class="left iconfont iconyou"></div>
      </div>
    </div>
    <van-popup :show="isShowRule" @close="isShowRule = false" position="bottom">
      <div class="rule-content">
        <h1>经验值规则说明</h1>
        <p>尊敬的用户，参与好融艺平台项目，即可获得经验值，详情请咨询客服。</p>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  computed: {
    ...mapState([
      'isLogin'
    ])
  },
  data(){
    let that = this;
    return {
      isShowRule: false,
      picPre: that.$api.picPre,
      navBarHeight: 0,
      titleBarHeight: 44,
      statusBarHeight: 0,
      info:{}
    }
  },
  methods: {
    goPage(url){
        uni.navigateTo({
        	url: url
        })
      },
    ...mapMutations([
      'increment',
      'decrement'
    ]),
    logout() {
      this.$ajax
        .post(this.$api.logout)
        .then(() => {
          ﻿uni.removeStorageSync('token');
          this.$store.dispatch('changeLoginStatus',false);
          ﻿uni.showToast({
            title: "退出成功！",
            icon: 'success',
            duration: 2000
          })
        })
        .catch(err => {
          ﻿uni.showToast({
            title: err,
            icon: 'none',
            duration: 2000
          })
        });
    },
    getPersonInfo(){
      this.$ajax
        .post(this.$api.getMemberInfo)
        .then(res => {
          setTimeout(function(){
            ﻿uni.hideLoading()
            }, 800)
          this.info = res
        })
        .catch(err => {
          setTimeout(function(){
            ﻿uni.hideLoading()
            }, 800)
          ﻿uni.showToast({
            title: err,
            icon: 'none',
            duration: 2000
          })
        });
    }
  },
  onLoad(){
    const self = this;
    ﻿uni.getSystemInfo({
      success(system) {
        self.statusBarHeight = system.statusBarHeight;
        self.platform = system.platform;
        let platformReg = /ios/i;
        if (platformReg.test(system.platform)) {
          self.titleBarHeight = 44;
        } else {
          self.titleBarHeight = 48;
        }
        self.navBarHeight = self.statusBarHeight + self.titleBarHeight;
      }
    });
  },
  onShow() {
    if(this.isLogin){
		uni.showLoading({
			title: '加载中',
			mask: true
		});
	this.getPersonInfo()
    }
  },
}
</script>

<style>
  .header{
    background-image: url("https://test.hrycf.com/front/bg.jpg");
    background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
    background-color: #e95252;
  }
  .bar-title{
    text-align: center;
    font-size:36rpx;
    font-family:PingFang SC;
    font-weight:bold;
    color:rgba(255,255,255,1);
  }
  .avatar{
    width: 107rpx;
    height:107rpx;
    border-radius: 50%;
  }
  .info{
    padding: 0 31rpx 95rpx 31rpx;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .info img{
    vertical-align: middle;
    margin-right: 24rpx;
  }
  .infoContent{
    display: flex;
    align-items: center;
  }
  .infoContent h1{
    font-size:36rpx;
    font-family:PingFang SC;
    font-weight:bold;
  }
  .jingyan{
    font-size:26rpx;
    font-family:PingFang SC;
    font-weight:bold;
  }
  .jingyan .iconfont{
    font-size:26rpx;
    font-family:PingFang SC;
    font-weight:bold;
  }
  .iconyou{
    color: #A4A3AB;
    font-size: 32rpx;
  }
  .info .iconyoujian{
    font-size: 48rpx;
    position: relative;
  }
  .info .iconyoujian .dot{
    position: absolute;
    width:12rpx;
    height:12rpx;
    background:rgba(255,186,54,1);
    border-radius:50%;
    top: 0;
    left: 0;
  }
  .list{
    border-radius:10rpx 10rpx 0px 0px;
    background:rgba(255,255,255,1);
    margin-top: -58rpx;
    padding: 0 22rpx 0 30rpx;
  }
  .item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 38rpx 0 32rpx 0;
  }
  .needBorder{
    border-bottom: 1px solid #EEEEEE !important;
  }
  .item img{
    vertical-align: middle;
    margin-right: 19rpx;
    width: 74rpx;
    height: 74rpx;
  }
  .item span{
    font-size:30rpx;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(50,50,50,1);
  }
  .line{
    height:14rpx;
    background:rgba(247,247,247,1);
    border-radius:4rpx;
  }
  page {
    background-color: #F7F7F7;
  }
  .kefu{
    border: none;
    background: transparent;
    font-weight:500;
    color:rgba(50,50,50,1);
  }
  button:after{
    border: none;
  }
  .rule-content{
    padding: 40rpx
  }
  .rule-content h1{
    font-size: 32rpx;
    text-align: center;
    margin-bottom: 40rpx;
    font-weight: bold;
  }
  .rule-content p{
    font-size: 24rpx;
    line-height: 44rpx;
  }
</style>
